<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>User Profile</title>
	<link rel="stylesheet" href="css\bootstrap.css" />
		<link rel="stylesheet" href="css\MainStyle.css" />
		<link rel="stylesheet" href="css\UserProfileStyle.css" />		
	<script src="js/angular.min.js"></script>
	<script src="js/ExtractUserDetails.js"></script>
</head>
<body data-ng-app="profile" data-ng-controller="getUserDetails" data-ng-init="checkSession('userProfile')">

	<div class="container-fluid" data-ng-model="nickname">
		<div class="jumbotron"><h1><br></h1></div>
		<div class="panel panel-default  panel-half-transparent"> <!-- Panel User profile and logout -->
		  <div class="panel-body">
		  <ul class="nav nav-pills">
		  	 	<li id="LogoutButton">
		  	 		<form method="post" action = "logout">
		  	 			<button type="submit" class="btn btn-default css_btn_class" >Logout</button>
		  	 		</form>
		  	 	</li>
		  	 	<li id="MainButton">
		  	 		<button class="btn btn-default css_btn_class"  onclick="location.href = 'main.html'" >Main Window</button>
		  	 	</li>
		  </ul>
		  </div>
		 </div>  <!-- End Panel User profile and logout -->
	</div> 

	
	<div class="container smaller size_80">
	  <div class="row">
	    <div class="col-md-20 col-xs-30">
	      <div class="well panel panel-default panel-transparent">
	        <div class="panel-body">
	          <div class="row">
	            <div class="col-xs-8 col-sm-4 text-center" data-ng-model="photo" id="ImgDiv">
	              <img src="#" data-ng-src="{{photo}}" alt="User Photo" class="center-block img-rounded img-thumbnail" id="ImgItem"></img>
	            </div>
	            <!--/col--> 
	            <div class="col-xs-12 col-sm-8">
	              <h2  data-ng-model="username">{{nickname}}</h2>
	              <p class=" voffset7 hoffset3 wrap" data-ng-model="mail"><strong>Mail:&nbsp;&nbsp;</strong><label data-ng-bind="mail"></label></p>
	              <p class="hoffset3 wrap"><strong data-ng-model="description">Description:&nbsp;&nbsp; </strong><label data-ng-bind="description"></label></p>
	              <div class="centered">
	              	<button type="button" class="btn btn-success btn-lg pull-center" data-ng-click="btnFollow(username)" data-ng-show="EnableFollowButton">Follow</button>
	              	<button type="button" class="btn btn-success btn-lg pull-center" data-ng-click="btnUnFollow(username)" data-ng-show="EnableUnFollowButton">UnFollow</button>
	              </div>
	            </div>
	            <!--/col-->          
	            <div class="clearfix"></div>
	            <div class="col-xs-12 col-sm-4 voffset7">
	              <button value="set background" data-ng-click="getMessages(username,nickname)" class="btn btn-info btn-block"> Messages </button>
	            </div>
	            <!--/col-->
	            <div class="col-xs-12 col-sm-4 voffset7">
	              <button value="set background" data-ng-click="getFollowings(username)" class="btn btn-primary btn-block"> Following </button>
	            </div>
	            <!--/col-->
	            <div class="col-xs-12 col-sm-4 voffset7">
	             <button type="button" value="set background" data-ng-click="getFollowers(username)" class="btn btn-success btn-block">Followers </button>  
	            </div>
	            <!--/col-->
	            
	            <!-- show followers panel -->
	            <div class="panel voffset3 panel-green" data-ng-show=ShowFollowersPanel>
	            	<br></br>
	            	<br></br>
	            	<div data-ng-repeat="x in followersList" >
	            		<div class="panel panel-default center-block" id="showFollowersStyle">
	            			<div class="panel-heading">
	            				<label><a id="red_user_20" data-ng-click="btnShowMemberProfile(x.Nickname)"><span data-ng-bind="x.Nickname"></span></a></label>
	            				<button type="button" class="btn btn-success btn-lg pull-right" data-ng-click="btnFollowMember(x.Username,username,'followers')" data-ng-show="{{x.FollowEnabled}}">Follow</button>
	              				<button type="button" class="btn btn-success btn-lg pull-right" data-ng-click="btnUnFollowMember(x.Username,username,'followers')" data-ng-show="{{x.UnFollowEnabled}}">UnFollow</button>
	            			</div>
            				<div class="panel-body">
	            				<div class="row">
	  								<div class="col-md-4">
	  									<div id = "ImgFollowDiv">
	  										<img data-ng-src="{{x.Photo}}" alt="" class="center-block img-rounded img-thumbnail pull-left" id = "ImgFollowItem"></img>
	  									</div>
	  								</div>
	  								<div class="col-md-8" id= "DescriptionStyle"><label data-ng-bind="x.Description"></label></div>
								</div>
            				</div>
	            		</div> 
	            	</div>          				   
	            </div><!-- end of show followers panel -->

	     
	            <!-- show Followings panel -->
	            <div class="panel voffset3 panel-blue" data-ng-show=ShowFollowingsPanel>
	            	<br></br>
	            	<br></br>	            	     
	            	<div data-ng-repeat="x in followingsList" >
	            		<div class="panel panel-default center-block" id="showFollowersStyle">
	            			<div class="panel-heading">
	            				<label><a id="red_user_20" data-ng-click="btnShowMemberProfile(x.Nickname)"><span data-ng-bind="x.Nickname"></span></a></label>
	            				<button type="button" class="btn btn-success btn-lg pull-right" data-ng-click="btnFollowMember(x.Username,username,'followings')" data-ng-show="{{x.FollowEnabled}}">Follow</button>
	              				<button type="button" class="btn btn-success btn-lg pull-right" data-ng-click="btnUnFollowMember(x.Username,username,'followings')" data-ng-show="{{x.UnFollowEnabled}}">UnFollow</button>
	            			</div>
            				<div class="panel-body">
	            				<div class="row">
		  								<div class="col-md-4">
		  									<div id = "ImgFollowDiv">
	            								<img data-ng-src="{{x.Photo}}" alt="" class="center-block img-rounded img-thumbnail pull-left" id = "ImgFollowItem"></img>
	            							</div>
		  								</div>
		  									<div class="col-md-8" id= "DescriptionStyle"><label data-ng-bind="x.Description"></label></div>
								</div>
            				</div>
	            		</div>
	            	</div>    
	     		</div> <!-- end of show Followings panel -->
	     
	     
	            <!-- show Messages panel -->   
	            <div class="panel voffset3 panel-lightblue" data-ng-show=ShowMessagesPanel>	     
	            	<br></br>
	            	<br></br>
					 	<div data-ng-repeat="x in result" >
					 		<div class="panel panel-default" id="ShowMessageDiv">
			  				<!-- Who wrote and when -->
			  				<small id="ShowWhoWroteAndWhenSmallLebal"> Posted By: <a data-ng-click="btnShowMemberProfile(x.Nickname)" id="red_user"><span data-ng-bind="x.Nickname"></span></a> ( <span data-ng-bind="x.Time"></span> )</small> 
			  				<br>
					  		<!--# The message -->	
						   	<div class="panel-body">
								<label id="ShowCommentTextLaebl"><span data-ng-bind-html="TurnToHtml(x.Text)" data-compile-template></span></label>
						  	</div>
				   		</div>
				  <br>
	     		</div> <!--end of show Messages panel --> 
	            
	            
	          </div>
	          <!--/row-->
	        </div>
	        <!--/panel-body-->
	      </div>
	      <!--/panel-->
	    </div>
	    <!--/col--> 
	  </div>
	  <!--/row--> 
	</div>
</div> <!--/container-->

  <!-- To identify from which form it was sent -->
 <div class="form-group">
 	<input type="text" class="form-control" name="Profile" data-ng-model="Profile" style="display: none;" />	
 </div>	
</body>
</html>